<template>
	<view style="width: 100%;">
		<view class="u-page">


			<!-- <u-row customStyle="margin:10px">
				<u-col span="12"> -->

					<!-- <text class="mypage-title">设备信息查询</text> -->

					<!-- <uni-icons @click="handel_plus_click" style="text-align: right;" type="plus" size="30">
					</uni-icons>
				</u-col>
			</u-row> -->

			<!-- <u-row customStyle="margin-bottom: 10px">
				<u-col span="12">
					<u-search style="z-index: 999;" :disabled='true' bgColor="rgb(255 255 255)" placeholder="搜索"
						shape="round" @click="handle_SearchBox_click" :showAction="false" :animation="true"></u-search>
				</u-col>
			</u-row> -->

			<!-- !!修改完成上搜索和添加按钮 -->
			<view class="top" style="background-color: transparent;">
				<u-row customStyle="margin-bottom: 10px" class="search">
					<u-col span="12">
						<u-search style="z-index: 999;" :disabled='true' bgColor="rgb(255 255 255)" placeholder="搜索"
							shape="round" @click="handle_SearchBox_click" :showAction="false" :animation="true"></u-search>
					</u-col>
				</u-row>
				<view class="userInfoCreate" style="font-size: 30px;padding-bottom: 10px;">
					<!-- 源代码图标大小已未受修改影响 -->
					<u-row customStyle="margin: 10px">
						<u-col span="3"></u-col>
						<u-col span="3" customStyle="padding-top: 1%;" >
							<uni-icons @click="handel_plus_click" style="text-align: right;" type="plus"
								size="30"></uni-icons>
						</u-col>
					</u-row>
				</view>
			</view>


			<u-popup :show="show" @close="close" @open="open">
				<view style="width: 93%;align-self: center;">
					<u--form labelWidth='auto' labelPosition="left" :model="queryParamsForm" :rules="rules" ref="form1">

						<!-- <u-form-item label="搜索数量" prop="pageSize" borderBottom ref="item1">
							<u--input type="number" placeholder="请输入内容" border="surround" inputAlign='center'
								shape='square' v-model="queryParams.pageSize"></u--input>
						</u-form-item> -->

						<u-form-item label="长者姓名" prop="name" borderBottom ref="item1">
							<u--input inputAlign='center' shape='square' border="none" v-model="queryParamsForm.name">
							</u--input>
						</u-form-item>

						<u-form-item label="身份证号码" prop="idNumber" borderBottom ref="item1">
							<u--input inputAlign='center' shape='square' border="none"
								v-model="queryParamsForm.idNumber">
							</u--input>
						</u-form-item>
						<u-form-item label="设备编号" prop="deviceNum" borderBottom ref="item1">
							<u--input inputAlign='center' shape='square' border="none"
								v-model="queryParamsForm.deviceNum">
							</u--input>
						</u-form-item>
						<u-form-item label="所属网关编码" prop="gatewayNum" borderBottom ref="item1">
							<u--input inputAlign='center' shape='square' border="none"
								v-model="queryParamsForm.gatewayNum">
							</u--input>
						</u-form-item>
						<u-form-item label="厂商" prop="manufacturer" borderBottom ref="item1">
							<u--input inputAlign='center' shape='square' border="none"
								v-model="queryParamsForm.manufacturer"></u--input>
						</u-form-item>
						<u-form-item label="登记人员" prop="registerName" borderBottom ref="item1">
							<u--input inputAlign='center' shape='square' border="none"
								v-model="queryParamsForm.registerName"></u--input>
						</u-form-item>
						<u-form-item label="审核人员" prop="auditorName" borderBottom ref="item1">
							<u--input inputAlign='center' shape='square' border="none"
								v-model="queryParamsForm.auditorName">
							</u--input>
						</u-form-item>
					</u--form>

					<u-row customStyle="margin:10px">
						<u-col span="12">
							<u-button class="custom-style" type="primary" size="small" @click="handel_search_click">搜索
							</u-button>
						</u-col>

					</u-row>
					<u-row customStyle="margin:10px">
						<u-col span="12">
							<u-button class="custom-style" type="primary" size="small" @click="handel_reset_click">重置
							</u-button>
						</u-col>
					</u-row>
				</view>
			</u-popup>
			<u-row customStyle="margin-bottom: 10px ">
				<u-col span="12">
					<u-empty v-if="DataList.length == 0" mode="list"></u-empty>
					<u-cell-group customStyle='background-color: white;' v-else>
						<u-cell v-for="(item, index) in DataList" size="large" clickable :name="item.id">
							<view slot="title" class="u-slot-title">
								<text class="u-cell-text">{{ item.deviceName }}</text>
							</view>
							<view slot="value" style="display: flex;flex-direction: row;">
								<u-button type="primary" style="margin-right: 10px;" @click="handel_cell_click(item)"
									text="详情"></u-button>
								<u-button type="success" style="margin-right: 10px;" @click="handel_history_click(item)"
									text="历史数据"></u-button>
							</view>

						</u-cell>
					</u-cell-group>
					<uni-load-more :status="status" :contentText="loadText" @clickLoadMore="MyonLoad" />
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	import {
		transformPostBody,
		transformRequestURL
	} from "@/utils/requestParams.js";

	import {
		QueryDeviceInstallList,
		addDeviceInstall,
		updateDeviceInstall,
		getDeviceInstall,
		delDeviceInstall,
		QueryDeviceInstallHistory
	} from "@/api/elder/DeviceInstall.js";

	export default {
		name: "index",
		data() {
			return {
				DataList: [],
				total: 0,
				// URL查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 15,
					startAge: undefined,
					endAge: undefined,
				},
				// 表单查询参数
				queryParamsForm: {
					name: undefined,
					idNumber: undefined,
					deviceNum: undefined,
					gatewayNum: undefined,
					manufacturer: undefined,
					registerName: undefined,
					auditorName: undefined,
				},
				rules: {},
				show: false,
				loading: false, //加载中提示框显示
				finished: false,
				// status: 'more', // 显示底部提示
				loadText: {
					contentdown: "点击加载更多",
					contentrefresh: "正在加载",
					contentnomore: "没有更多数据了",
				},
			}
		},
		watch: {},
		computed: {
			status() {
				if (this.DataList.length < this.total) {
					return "more";
				} else {
					this.finished = true;
					return "nomore";
				}
			},
		},
		onShow() {
			this.getList();
		},
		methods: {
			// MyonRefresh() {
			// 	console.log('MyonRefresh')
			// 	this.DataList = [];
			// 	this.queryParams.pageNum = 1;
			// 	this.finished = false;
			// 	this.getList();
			// 	//done();
			// },
			handle_SearchBox_click() {
				this.show = true
				console.log('handle_SearchBox_click', this.show)
			},
			MyonLoad(e) {
				this.fetch();
				this.finished = true;
				e.detail = {
					status: 'loading'
				};
				return e;
			},
			fetch() {
				this.queryParams.pageNum = this.queryParams.pageNum + 1;
				QueryDeviceInstallList(
					transformRequestURL(this.queryParams),
					transformPostBody(this.queryParamsForm)
				).then((response) => {
					if (response.code == 200) {
						this.DataList = this.DataList.concat(
							response.rows.filter((item) => !this.DataList.some((i) => i.id === item.id))
						);
						this.total = response.total;
					}
				});
			},

			open() {},
			close() {
				this.show = false
			},
			handel_search_click() {
				this.finished = false;
				this.queryParams.pageNum = 1;
				this.DataList = []
				this.getList();
				this.show = false;
			},
			handel_reset_click() {
				// this.$refs.form1.resetFields();
				// console.log("handel_reset_click", this.queryParams,
				// 	this.queryParamsForm);

				this.queryParams = {
						pageNum: 1,
						pageSize: 15,
						startAge: undefined,
						endAge: undefined,
					},
					this.queryParamsForm = {
						name: undefined,
						idNumber: undefined,
						deviceNum: undefined,
						gatewayNum: undefined,
						manufacturer: undefined,
						registerName: undefined,
						auditorName: undefined,
					}
			},
			handel_plus_click() {
				console.log('handel_plus_click')
				this.$tab.navigateTo('/pages/DeviceInstall/add')
			},
			//点击列表
			handel_cell_click(item) {
				this.$tab.navigateTo('/pages/DeviceInstall/detail?id=' + item.id)
			},
			// 点击历史记录
			handel_history_click(item) {
				this.$tab.navigateTo('/pages/DeviceInstall/history?id=' + item.id)
			},
			//获取设备列表
			getList() {
				QueryDeviceInstallList(
					transformRequestURL(this.queryParams),
					transformPostBody(this.queryParamsForm)
				).then((response) => {
					if (response.code == 200) {
						this.DataList = response.rows;
						this.total = response.total;
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
@import "../../yangLaoAppStyle.scss";
	.demo-uni-row {
		margin-bottom: 10px;
		/* QQ、字节小程序文档写有 :host，但实测不生效 */
		/* 百度小程序没有 :host，需要设置block */
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	/* 支付宝小程序没有 demo-uni-row 层级 */
	/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	/deep/ .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.demo-uni-col {
		height: 36px;
		border-radius: 4px;
	}


	.mypage-title {
		font-size: 20px;
		font-weight: 600;
		align-self: center;
	}

	.wrap {
		padding: 12px;
	}

	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	.custom-style {
		width: 90%;
		font-weight: bolder;
		font-size: 15px;
	}
</style>